<template>
  <div class="dropdown">
    <a href="#" class="btn btn-outline-light my-2 dropdown-toggle" role="button" data-bs-toggle="dropdown" aria-expanded="false" @click="isOpen = !isOpen">你好，{{ title }}</a>
    <ul class="dropdown-menu" :style="{display: 'block'}" v-show="isOpen">
      <slot></slot>
    </ul>
  </div>
</template>

<script>
import { defineComponent, ref } from 'vue'
export default defineComponent({
  name: 'DropDown',
  props: {
    title: {
      type: String,
      required: false
    }
  },
  setup () {
    const isOpen = ref(false)
    return {
      isOpen
    }
  }
})
</script>

<style lang="scss" scoped>
.dropdown-menu{
  background-color: rgba(255, 255, 255, 1);
}
</style>
